<template>
	<view class="center">
		<u-navbar title="不吃香菜的消息" placeholder='true' autoBack='true'></u-navbar>
		<view class="message-top">
			<view class="top-box" @click="onstar">
				<view class="">
					<u-icon name="star" size="28" v-if="!showstar"></u-icon>
					<u-icon name="star-fill" color="red" size="28" v-if="showstar"></u-icon>
					{{showstar?'取关':'关注'}}
				</view>

			</view>
			<view class="top-box" @click="onAppointment">
				<view class="">
					<u-icon name="map" size="28">
					</u-icon>
					约会
				</view>
			</view>
			<view class="top-box" @click="onsend">
				<view class="">
					<u-icon name="email" size="28">
					</u-icon>
					短信
				</view>
			</view>
			<view class="top-box" @click="onreport">
				<view class="">
					<u-icon name="error-circle" size="28">
					</u-icon>
					举报
				</view>
			</view>
			<view class="top-box" @click="onback">
				<view class="">
					<u-icon name="close-circle" size="28">
					</u-icon>
					拒绝
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx; width: 1rpx;">

		</view>
		<view class="message-box">
			<view class="" v-for="(item,index) in maslist" :key="index">
				<view class="message-right" v-if="item.user==1">
					<view class="right-text">
						{{item.masg}}
					</view>
					<view class="right-user">
						<image :src="imgBaseUrl + '/ache/images/user.png'" class="imga" mode=""></image>
					</view>
				</view>
				<view class="message-left" v-if="item.user==2">
					<view class="left-user">
						<image :src="imgBaseUrl + '/ache/images/user.png'" class="imga" mode=""></image>
					</view>
					<view class="left-text">
						{{item.masg}}
					</view>

				</view>
			</view>
		</view>
		<view class="box-all" v-if="from.name">
			<view class="box-all-center">
				<view class="center-title">
					现场约面邀请
				</view>
				<view class="center-text">
					地点：{{from.name}}
				</view>
				<view class="center-text">
					时间：{{from.time?chengtiem(from.time) :'--'}}
				</view>
				<view class="center-button">
					<u-button text="拒绝"></u-button>
					<u-button type="primary" text="同意"></u-button>
				</view>
			</view>

		</view>
		<view class="" style="height: 80rpx; width: 1rpx;">

		</view>
		<view class="fixed-bottom">
			<u--input placeholder="请输入内容" border="surround" shape='circle' v-model="value"></u--input>
			<view style="padding-left: 20rpx;" @click="onsende">
				<u-icon name="checkmark" color="#2979ff" size="36"></u-icon>
			</view>
		</view>
		<view>
			<u-popup :show="show" @close="close" closeable='true'>
				<view class="pop-box">
					<view class="pop-img">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="3"></u-upload>
					</view>
					<view class="pop-input">
						<u--input placeholder="请输入内容" border="surround" v-model="value1"></u--input>
					</view>
					<view class="pop-button">
						<u-button text="举报" color="linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%)" shape="circle"
							@click="onsubmit"></u-button>
					</view>
				</view>
			</u-popup>
			<u-popup :show="show2" @close="close2" closeable='true'>
				<view class="pop-box">
					<view class="pop-title">
						约面地点：
					</view>

					<view class="pop-radio">
						<u-radio-group v-model="from.name" placement="column" @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
								:disabled="item.disabled" :key="index" :label="item.name" :name="item.name"
								@change="radioChange">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="pop-tiem" @click="show3=true">
						{{from.time?chengtiem(from.time) :'请选择时间'}}
					</view>

					<view class="pop-button">
						<u-button text="约面" color="linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%)" shape="circle"
							@click="getAppointment"></u-button>
					</view>
					<u-datetime-picker :show="show3" v-model="from.time" mode="datetime" @close='tiemclose'
						@confirm='ontime' :minDate="newtime"></u-datetime-picker>
				</view>
			</u-popup>
			<u-modal :show="show4" :title="title" showCancelButton='true' @confirm='onadd' @cancel='onadd'>
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
			<u-modal :show="show5" :title="title2" showCancelButton='true' @confirm='onsend2' @cancel='onsend2'>
				<view class="slot-content">
					<rich-text :nodes="content2"></rich-text>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				value1: '',
				timelist: "",
				show: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				title: '拒绝',
				content: `是否加入黑名单，不在看她，不再接收消息。`,
				title2: '发送短信',
				content2: `发送短信给她，提醒她回复信息。`,
				value: '',
				maslist: [{
						user: 1,
						masg: '生命是一段美好的旅程，希望你是与我同行的人'
					},
					{
						user: 2,
						masg: '生命是一段美好的旅程，希望你是与我同行的人'
					},
				],
				from: {
					name: '',
					time: ''
				},
				showstar: false,
				fileList1: [],
				// 基本案列数据
				radiolist1: [{
						name: '五台山（已约满）',
						disabled: true
					},
					{
						name: '平遥古城',
						disabled: false
					},
					{
						name: '云冈石窟',
						disabled: false
					}, {
						name: '悬空寺',
						disabled: false
					}
				],
				newtime: new Date().getTime(),
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '苹果',
			};
		},

		computed: {
			...mapGetters(['imgBaseUrl'])
		},
		methods: {
			onsend(){
				this.show5= true
			},
			onsend2(){
				this.show5 = false
			},
			onadd() {
				this.show4 = false
				uni.navigateBack()
			},
			getAppointment() {
				console.log(this.from, 'sssss')
				this.close2()
			},
			chengtiem(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');

				return `${year}年${month}月${day}日 ${hours}时${minutes}分`;
			},
			ontime(e) {

				console.log(e, '确定')
				this.tiemclose()
			},
			tiemclose() {
				this.show3 = false
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			onAppointment() {
				this.show2 = true
			},
			close2() {
				this.show2 = false
				// console.log('close');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},
			onback() {
				this.show4 = true
			},
			onstar() {
				this.showstar = !this.showstar
			},
			onreport() {
				console.log('举报')
				this.show = true
			},
			onsubmit() {
				this.close()
			},
			close() {
				this.show = false
				// console.log('close');
			},
			onsende() {

				if (!this.value) {
					return this.$message('请输入信息')
				}
				let data = {
					user: 1,
					masg: this.value
				}
				this.maslist.push(data)
				this.value = ''
			}

		}
	};
</script>
<style lang="scss">
	@import '@/styles/mixin.scss';

	.center {
		min-height: 100%;
		background-color: #f5f5f5;

		.message-box {
			padding: 20rpx;

			.message-right {
				padding-top: 20rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.right-text {
					padding: 20rpx;
					background-color: #9feceb;
					border-radius: 15rpx;
					max-width: 80%;
					font-size: 32rpx;
					white-space: normal;
					/* 或者 pre-wrap，这取决于你的具体需求 */
					word-wrap: break-word;
					/* 或者 overflow-wrap: break-word; */
				}

				.right-user {
					padding-left: 20rpx;

					.imga {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: black;
					}
				}

			}

			.message-left {
				padding-top: 20rpx;
				display: flex;
				// justify-content: flex-end;
				align-items: center;

				.left-text {
					padding: 20rpx;
					background-color: #9feceb;
					border-radius: 15rpx;
					max-width: 80%;
					font-size: 32rpx;
					white-space: normal;
					/* 或者 pre-wrap，这取决于你的具体需求 */
					word-wrap: break-word;
					/* 或者 overflow-wrap: break-word; */
				}

				.left-user {
					padding-right: 20rpx;

					.imga {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: black;
					}
				}

			}

		}

		.box-all {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 600rpx;

			.box-all-center {
				border-radius: 15rpx;
				// padding: 20rpx;
				border: 1rpx solid #9feceb;

				.center-title {
					padding: 20rpx;
					font-size: 32rpx;
					font-weight: bold;
					background-color: #9feceb;
				}

				.center-text {
					padding: 20rpx;
					font-size: 30rpx
				}

				.center-button {
					display: flex;
					padding: 20rpx;
				}
			}
		}

		.message-top {
			position: fixed;
			top: 175rpx;
			// left: 0;
			width: 100%;
			/* 使div宽度覆盖整个屏幕 */
			background-color: #fff;
			/* 设置背景颜色以便于观察 */
			padding: 10px;
			/* 添加一些内边距 */
			display: flex;
			justify-content: space-between;

			.top-box {
				width: 200rpx;
				display: flex;
				text-align: center;
				justify-content: center;
				align-items: center;

			}
		}

		.pop-box {
			padding: 20rpx;

			.pop-title {
				font-size: 32rpx;
				padding-top: 20rpx;
			}

			.pop-radio {
				padding-top: 20rpx;
			}

			.pop-tiem {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 500;
			}

			.pop-img {
				padding-top: 20rpx;
			}

			.pop-input {
				padding: 20rpx;
			}

			.pop-button {
				padding: 20rpx;
			}
		}

		.fixed-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			/* 使div宽度覆盖整个屏幕 */
			background-color: #f0f0f0;
			/* 设置背景颜色以便于观察 */
			padding: 10px;
			padding-bottom: 40rpx;
			/* 添加一些内边距 */
			display: flex;
		}
	}
</style>